<template>
  <div id="kind">
<!--    导航栏-->
      <kind-nav-bar/>
<!--    分类控制栏-->
      <scroll class="tab_scroll">
          <kind-tab-control :message="kindTitle" @itemClick="itemClick"/>
      </scroll>
      <!--    中间控制栏-->
      <tab-control :title="centerTitle" @tabClick="tabClick"
                   ref="tabControl2" class="tab_control"/>
      <scroll class="shop_scroll" :probe-type="3" @scroll="getPosition" ref="shopScroll">
<!--    各个分类商品-->
          <kind-shops/>
<!--    商品展示-->
          <kind-shop-display :message="goods" class="shop_display"/>
      </scroll>
      <back-top v-show="isShow" @click.native="backTop"/>
  </div>
</template>

<script>
  import KindNavBar from "./childComponent/KindNavBar";
  // import KindTabControl from "./childComponent/KindTabControl";
  // import KindShops from "./childComponent/KindShops";
  import TabControl from "../../components/content/tabcontrol/TabControl";
  import KindShopDisplay from "./childComponent/KindShopDisplay";
  import Scroll from "../../components/common/scroll/Scroll";
  import BackTop from "../../components/common/BackTop";
  import {getKind, getSubkind,getkindDetail} from "../../network/kind";
  import {GET_SHOP} from "../../store/mutation-type";

  export default {
      name: "Kind",
      data() {
          return {
              kindTitle: [],
              centerTitle:['综合','新品','销量'],
              miniWallKey:'',
              shopType:'pop',
              goods:[],
              isShow:''
          }
      },
      components: {
          KindNavBar,
          // KindTabControl,
          // KindShops,
          TabControl,
          KindShopDisplay,
          Scroll,
          BackTop
      },
      methods: {
          //获取商品的分类
          getKindTitle() {
              getKind().then(res => {
                  this.kindTitle = res.data.data.category.list;
                  // console.log(this.kindTitle);
                  //页面初始获取第一条数据
                  getSubkind(this.kindTitle[0].maitKey).then(res => {
                      this.$store.dispatch(GET_SHOP, res.data.data.list);
                  });
                  //获取第一条商品展示数据
                  getkindDetail(this.kindTitle[0].miniWallkey,this.shopType).then(res => {
                      this.goods = res.data;
                  });
                  this.miniWallkey = this.kindTitle[0].miniWallkey;
              });
          },
          //获取各个分类的商品数据
          itemClick(index){
              this.miniWallkey = this.kindTitle[index].miniWallkey;
              getkindDetail(this.miniWallkey,this.shopType).then(res => {
                  this.goods = res.data;
              })
          },
          //点击切换['综合','新品','销量']的商品
          tabClick(index){
              switch (index) {
                  case 0 :
                      this.shopType = 'pop';
                      break;
                  case 1 :
                      this.shopType = 'new';
                      break;
                  case 2 :
                      this.shopType = 'sell';
                      break;
              }
              //获取相对应的分类数据
              getkindDetail(this.miniWallkey,this.shopType).then(res => {
                  this.goods = res.data
              })
          },
          //获取中间控制栏的位置
          getPosition(position){
              this.isShow = -position.y > 600
          },
          backTop(){
              this.$refs.shopScroll.scrollTo(0,0,200)
          }

      },
      mounted() {
          this.getKindTitle();
      }
  }
</script>

<style scoped>
    #kind{
        position: relative;
    }
    .tab_scroll{
        overflow: hidden;
        height: calc(100vh - 44px);
        width: 80px;
        background-color: #f6f6f6;
    }
    .shop_scroll{
        height: calc(100vh - 137px);
        position: absolute;
        left: 90px;
        top: 88px;
    }
    .tab_control {
        position: absolute;
        top: 44px;
        z-index: 999;
    }
</style>
